import './style.css'
function Model(props) {
  const { message, type, isShow, onConfirm, onCancel } = props
  let Icon = null;
  const success = () => {
    return (
      <div className='model-success'>
        <div className='model-icon-success'></div>
      </div>
    )
  }
  const error = () => {
    return (
      <div className='model-error'>
        <div className='model-icon-error'></div>
      </div>
    )
  }
  const select = () => {
    return (
      <div className='model-selectField'>
        <div className='model-comfirm' onClick={onConfirm}>
          <div className='model-icon-comfirm'></div>
        </div>
        <div className='model-cancel' onClick={onCancel}>
          <div className='model-icon-cancel'></div>
        </div>
      </div>
    )
  }
  switch (type) {
    case 'success':
      Icon = success;
      break;
    case 'error':
      Icon = error;
      break;
    case 'selected':
      Icon = select;
      break;
    default:
      Icon = () => <></>
      break;
  }
  return <>
    {isShow && <div className='model-container'>
      <div className="model-box">
        <div>{message}</div>
        <Icon></Icon>
      </div>
    </div>}
  </>
}
export default Model;